"use client"
import { Button } from "@/components/ui/button"
import Image from "next/image"
import { useState} from "react"
import { motion } from "framer-motion"
import dynamic from "next/dynamic";
const DynamicReactJson = dynamic(() => import('react-json-view'), { ssr: false });


export default function Home() {
  const [recordJson, setRecordJson] = useState({data:"null"})
  const [left, setLeft] = useState(0)
  const handlePortalPass1 = async () => {
    setLeft(150)
    const res = await fetch("http://localhost:8080/p/v1/prove/create", {
      method: "POST",
      body: JSON.stringify({
        portal_code: "gz-100001",
        snap_time: "20240102103422567",
        license_plate_number: "A00000",
        license_plate_number2: "A00000",
        license_plate_color: "蓝色",
        license_plate_color2: "蓝色",
        vehicle_color: "黑色",
        vehicle_model: "轿车",
        lane_number: "123",
        snap_number: "1002",
        dangerous_chemicals_symols: "1",
        dangerous_chemicals_type: "",
        axle_type: "B",
        axle_number: "3",
        wheel_number: "6",
        vehicle_speed: "40",
        vehicle_length: "1020",
        traffic_vehicle_model: "大型货车",
        img_exist: "0",
        before_compress: "20m",
        after_compress: "10m",
        vehicle_width: "300",
        vehicle_height: "300",
        image_type: "jpg",
        image_url: "http://xxxx.jpg",
        record_id: "gz-10011",
        province_code: "贵州01",
        belong_video_url: "http://xxxx.mp4",
        belong_video_start_time: "20240102103031",
        belong_video_end_time: "20240102103125",
      }),
    })
    console.log({ res })
  }
  const handlePortalPass2 = async () => {
    setLeft(360)
    const res = await fetch("http://localhost:8080/p/v1/prove/create", {
      method: "POST",
      body: JSON.stringify({
        portal_code: "gz-100002",
        snap_time: "20240102104022567",
        license_plate_number: "A00000",
        license_plate_number2: "A00000",
        license_plate_color: "蓝色",
        license_plate_color2: "蓝色",
        vehicle_color: "黑色",
        vehicle_model: "轿车",
        lane_number: "123",
        snap_number: "1002",
        dangerous_chemicals_symols: "1",
        dangerous_chemicals_type: "",
        axle_type: "B",
        axle_number: "3",
        wheel_number: "6",
        vehicle_speed: "40",
        vehicle_length: "1020",
        traffic_vehicle_model: "大型货车",
        img_exist: "0",
        before_compress: "20m",
        after_compress: "10m",
        vehicle_width: "300",
        vehicle_height: "300",
        image_type: "jpg",
        image_url: "http://xxxx.jpg",
        record_id: "gz-10012",
        province_code: "贵州01",
        belong_video_url: "http://xxxx.mp4",
        belong_video_start_time: "20240102103031",
        belong_video_end_time: "20240102103125",
      }),
    })
    console.log({ res })
  }
  const handlePortalPass3 = async () => {
    setLeft(560)
    const res = await fetch("http://localhost:8080/p/v1/prove/create", {
      method: "POST",
      body: JSON.stringify({
        portal_code: "gz-100003",
        snap_time: "20240102112022567",
        license_plate_number: "A00000",
        license_plate_number2: "A00000",
        license_plate_color: "蓝色",
        license_plate_color2: "蓝色",
        vehicle_color: "黑色",
        vehicle_model: "轿车",
        lane_number: "123",
        snap_number: "1002",
        dangerous_chemicals_symols: "1",
        dangerous_chemicals_type: "",
        axle_type: "B",
        axle_number: "3",
        wheel_number: "6",
        vehicle_speed: "40",
        vehicle_length: "1020",
        traffic_vehicle_model: "大型货车",
        img_exist: "0",
        before_compress: "20m",
        after_compress: "10m",
        vehicle_width: "300",
        vehicle_height: "300",
        image_type: "jpg",
        image_url: "http://xxxx.jpg",
        record_id: "gz-10013",
        province_code: "贵州01",
        belong_video_url: "http://xxxx.mp4",
        belong_video_start_time: "20240102103031",
        belong_video_end_time: "20240102103125",
      }),
    })
    console.log({ res })
  }
  const handlePortalPass4 = async () => {
    setLeft(780)
    const res = await fetch("http://localhost:8080/p/v1/prove/create", {
      method: "POST",
      body: JSON.stringify({
        portal_code: "gz-100004",
        snap_time: "20240102113022567",
        license_plate_number: "A00000",
        license_plate_number2: "A00000",
        license_plate_color: "蓝色",
        license_plate_color2: "蓝色",
        vehicle_color: "黑色",
        vehicle_model: "轿车",
        lane_number: "123",
        snap_number: "1002",
        dangerous_chemicals_symols: "1",
        dangerous_chemicals_type: "",
        axle_type: "B",
        axle_number: "3",
        wheel_number: "6",
        vehicle_speed: "40",
        vehicle_length: "1020",
        traffic_vehicle_model: "大型货车",
        img_exist: "0",
        before_compress: "20m",
        after_compress: "10m",
        vehicle_width: "300",
        vehicle_height: "300",
        image_type: "jpg",
        image_url: "http://xxxx.jpg",
        record_id: "gz-10014",
        province_code: "贵州01",
        belong_video_url: "http://xxxx.mp4",
        belong_video_start_time: "20240102103031",
        belong_video_end_time: "20240102103125",
      }),
    })
    console.log({ res })

    // 上传 trade
    const res1 = await fetch("http://localhost:8081/t/v1/trade/create", {
      method: "POST",
      body: JSON.stringify({
        trade_id: "10012",
        trade_sn: "hw202401250001233",
        user_id: "102",
        snap_time: "20240102113022567",
        license_plate_number: "A00000",
        license_plate_number2: "A00000",
        record_ids: "gz-10011,gz-10012,gz-10013,gz-10014",
        record_province_codes: "贵州01,贵州01,贵州01,贵州01",
        prices: "300,500,200",
        total_price: "1000",
      }),
    })

    console.log({ res1 })
  }

  const handleGetRecord = async () => {
    const res1 = await fetch(
      "http://localhost:8081/t/v1/trade/hash/贵州01:10012:07194375f73270a018119868524a9a35427f22ea"
    )
    setRecordJson(await res1.json())
  }

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="w-full">
        <div className="w-full flex justify-between relative h-48">
          <div className="absolute left-[200px]">龙门架A(入口)</div>
          <div className="absolute left-[400px]">龙门架B</div>
          <div className="absolute left-[600px]">龙门架C</div>
          <div className="absolute left-[800px]">龙门架D(出口)</div>
          <motion.div
            className="absolute top-24"
            initial={{ left: -100 }}
            animate={{ left: left }}
          >
            <Image
              src={"/image/car.jpg"}
              alt={"汽车"}
              width={160}
              height={40}
            />
          </motion.div>
        </div>
        <div className="w-full flex gap-2 mt-8">
          <Button onClick={handlePortalPass1}>入口-门架1</Button>
          <Button onClick={handlePortalPass2}>门架2</Button>
          <Button onClick={handlePortalPass3}>门架3</Button>
          <Button onClick={handlePortalPass4}>出口-门架4</Button>
        </div>
        <div className="w-full mt-8 flex">
          <Button onClick={handleGetRecord}>获取交易数据</Button>
        </div>
        <div className="bg-blue-100 p-3 rounded-md min-h-44 mt-8">
          <DynamicReactJson src={recordJson} />
        </div>
      </div>
    </main>
  )
}
